<template>
  <div class="" @click="handleClick(item)">
      <mu-flexbox class="doctor-wrap">
        <mu-flexbox-item grow="0" basis="80px">
          <img class="doctor-img" :alt="item.doctorName" v-lazy="DOCTOR_IMG_URL + item.doctorCode + '.jpg'"/>
        </mu-flexbox-item>
        <mu-flexbox-item :grow="1" class="doctor-content">
          <div class="doctor-name">
            {{item.doctorName || item.regDeptName}}
            <span class="doctor-level">{{item.doctorLevel}}</span>
          </div>
          <div class="deptname t8">
            所属科室 {{dept.departmentName || item.departmentName}}
          </div>
          <p class="doctor-desc" style="doctorDescStyle">
            <span class="export">擅长</span>
             {{item.doctorGoodAt || item.doctorResume || '暂无介绍'}}
          </p>
          <div class="btn-wrapper">
            <mu-raised-button primary class="no-shadow" v-if="item.sourceState === '1'" >有号</mu-raised-button>
            <mu-raised-button default v-else-if="item.sourceState === '2'" disabled>约满</mu-raised-button>
            <mu-raised-button default v-else disabled>停诊</mu-raised-button>
          </div>
        </mu-flexbox-item>
      </mu-flexbox>

        <!--  dialog -->
        <mu-dialog :open="dialog" @close="close" dialogClass="appoint-dialog" titleClass="appoint-title" scrollable>
          <div class="dialog-header" slot="title">
            <h3>请选择预约时段</h3>
            <div class="tabs mt10">
              <span :class="[isActiveTab ? 'active':'']" @click="tabChange(1)">上午</span>
              <span :class="[!isActiveTab ? 'active' : '']"  @click="tabChange(2)">下午</span>
            </div>
          </div>
          <div class="dialog-main" ref="dialogMain">
            <mu-flexbox class="text-center mt10">
              <mu-flexbox-item :grow="1">
                <span class="t3">科室 </span>{{deptName}}
               </mu-flexbox-item>
              <mu-flexbox-item :grow="1">
                <span class="t3">诊查费 </span><span class="t5">￥{{fee}}</span>
               </mu-flexbox-item>
            </mu-flexbox>
            <select-time :times="times" v-if="times.length > 0"></select-time>
            <div class="no-data" v-else>没有数据</div>
          </div>
          <div slot="actions" class="dialog-close" @click="close">
            <i class="iconfont icon-close"></i>
          </div>
        </mu-dialog>
  </div>
</template>

<script>
import {commonAjax, DOCTOR_IMG_URL} from '@/api/api'
import SelectTime from '@/components/SelectTime'

export default {
  name: 'doctor-item',
  props: ['item', 'flag'],
  data () {
    return {
      doctorDescStyle: {},
      DOCTOR_IMG_URL,
      dept: JSON.parse(sessionStorage.dept || '{}'),
      dialog: false,
      times: [],
      deptName: '',
      fee: 0,
      isActiveTab: true
    }
  },
  methods: {
    tabChange (timeFlag) {
      this.isActiveTab = (timeFlag === 1)
      document.querySelector('.mu-dialog-body').scrollTop = 0
      this.getListdNumber(this.item, timeFlag)
    },
    handleClick (doctor) {
      if (parseInt(sessionStorage.fromapp || 0) === 1) {
        const departmentCode = doctor.departmentCode
        const departmentName = doctor.departmentName
        const doctorName = doctor.doctorName
        const doctorCode = doctor.doctorCode
        window.location.href = `app://doctor?departmentCode=${departmentCode}&departmentName=${departmentName}&doctorName=${doctorName}&doctorCode=${doctorCode}`
        return
      }
      // only for /about/doctors
      if (doctor.departmentCode && doctor.departmentName) {
        sessionStorage.dept = JSON.stringify({
          departmentName: doctor.departmentName,
          departmentCode: doctor.departmentCode
        })
      }
      sessionStorage.doctor = JSON.stringify(doctor)
      if (this.flag) {
        this.getListdNumber(doctor, 1)
      } else {
        this.$router.push('/appointment/doctor-info')
      }
    },
    appointClick (ev, item) {
      if (this.flag) {
        // 获取时间段
        ev.stopPropagation()
        sessionStorage.doctor = JSON.stringify(item)
        this.getListdNumber(item, 1)
      } else {
        this.handleClick(item)
      }
    },
    getListdNumber (item, timeFlag) {
      let params = {
        departmentCode: item.departmentCode,
        doctorCode: item.doctorCode,
        schedulingDate: sessionStorage.currentDay,
        doctorType: item.doctorType,
        timeFlag: timeFlag,
        outpatientTpye: 1
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax('appointment/listNumber', params, true).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.dialog = true
          this.isActiveTab = timeFlag === 1
          this.deptName = this.dept.departmentName
          this.fee = item.regFee
          res.data.data.forEach(v => {
            v.beginTime = v.beginTime.slice(11, 16)
            v.endTime = v.endTime.slice(11, 16)
          })
          this.times = res.data.data
        } else {
          this.times = []
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.message || '暂无号源'
          })
        }
      }).catch(() => {
        this.$store.commit('UPDATE_LOADING')
      })
    },
    close () {
      this.dialog = false
    }
  },
  components: { SelectTime }
}
</script>

<style lang="less" scoped>
@import '../common/css/vars.less';
.doctor-wrap {
  padding: 8px;
  border-bottom: 1px solid #f2f2f2;
  position: relative;
  .doctor-img {
    border-radius: 4px;
    width: 100%;
    height: auto;
    max-height: 90px;
  }
  .doctor-content {
    padding-left: 8px;
  }
  .btn-wrapper {
    position: absolute;
    right: 1em;
    top: 1em;
    .mu-raised-button {
      height: 30px;
      line-height: 30px;
      min-width: 66px;
    }
  }
  .deptname {
    margin: 4px 0;
  }
  .doctor-name {
    font-size: 1.1em;
    font-weight: normal;
    margin: 0;
    .doctor-level {
      font-size: 12px;
      padding:0 3px;
      color: @color-price;
      border-radius: 6px;
      border:1px solid @color-price;
    }
    .dept-name {
      color: @color-primary;
      border: 1px solid @color-primary;
      padding: 1px;
      border-radius: 10px;
      font-size: .8em;
    }
  }
  .doctor-job{
    margin-top: 8px;
    font-size: .9em;
  }
  .doctor-desc {
    color: #666;
    height: 1.6em;
    margin-bottom: 0;
    overflow: hidden;
    margin-top: 0;
    .export {
      background-color: #FFAD28;
      font-size: 12px;
      padding: 0 2px;
      border-radius: 2px;
      color: #fff;
    }
  }
}
</style>
